<template>
<view>
<view class="order-title">
    <view v-for="(item, index) in statuses" :key="index" :class="'order-status ' + (item.status==activeStatus?'active':'')" :data-status="item.status" @tap="changeTab">{{item.name}}</view>
</view>

<view v-for="(order, index) in orders" :key="index" class="order-li">
    <view class="order-header">
        <view class="order-seller ellipsis-1">买家：{{order.nickname}}</view>
        <view class="order-status-name">
            {{order.status==0?'未付款':''}}{{order.status==1?'已付款':''}}{{order.status==2?'等待分成(已收货)':''}}
            {{order.status==3?'已分成':''}}{{order.status==4?'已取消':''}}
        </view>
    </view>
    <view class="order-sn">订单号：{{order.order_sn}}</view>
    <view class="order-time">{{order.createTimeFormat}}</view>

    <view v-for="(item, index2) in order.goods_list" :key="index2" class="order-goodimg">
        <image class="order-img" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
        <view class="order-content">
            <view class="goods-name ellipsis-1">{{item.goods_name}}</view>
            <view style="color:red;">￥{{item.member_goods_price}}</view>
            <view>
                <text style="color:#7f7f7f;">佣金比例：</text>
                <text style="color:red;">{{item.distributRatio}}%</text>
                <text style="margin-left: 20rpx;color:#7f7f7f;">佣金:</text>
                <text style="color:red;">￥{{item.commission}}</text>
            </view>
            <view class="ellipsis-1" style="color:#7f7f7f;">{{item.spec_key_name}}</view>
        </view>
    </view>
    
    <view class="order-total">
        <text style="color:#7f7f7f;">获得佣金：</text><text style="color:red;">￥{{order.money}}</text>
    </view>
</view>

<view class="no-data" v-if="!orders || orders.length == 0">
    <image src="/static/images/cart-null.png" class="cart-image"></image>
    <view class="no-data-title">没有找到相关的记录</view>
    <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
</view>
</view>
</template>

<script>
// order_list.js
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      statuses: [{
        name: "未付款",
        status: '0'
      }, {
        name: "已付款",
        status: '1,2'
      }, {
        name: "已完成",
        status: '3'
      }],
      activeStatus: '0',
      orders: null,
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var status = typeof options.status == 'undefined' ? this.activeStatus : options.status;
    load.init(this, '', 'orders');
    this.requestOrders(status);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestOrders(this.activeStatus);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.requestOrders(this.activeStatus);
  },
  methods: {
    changeTab: function (e) {
      this.resetData();
      this.requestOrders(e.currentTarget.dataset.status);
    },
    requestOrders: function (status) {
      var that = this;
      var requestUrl = '/api/distribut/order_list?status=' + status + '&p=' + that.currentPage;
      this.setData({
        activeStatus: status
      });
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.createTimeFormat = util.formatTime(val.create_time);
          val.goods_list.forEach(function (val2, index2, arr2) {
            val2.distributRatio = (val2.commission / val2.goods_price * 100).toFixed(1);
          });
        });
        uni.stopPullDownRefresh();
      });
    },

    /** 重置数据 */
    resetData: function () {
      this.orders = null;
      this.currentPage = 1;
      load.resetConfig();
    }
  }
};
</script>
<style>
page{
    font-size: 28rpx;
}
.order-title{
    height: 80rpx;
    background-color: white;
}
.order-status{
    width: 33.33%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.active{
    color:red;
}
.order-li{
    background-color: white;
    margin: 10rpx 0;
    padding: 0 20px;
}
.order-header{
    height: 80rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.order-seller{
    float: left;
    line-height: 80rpx;
    vertical-align: middle;
    max-width: 500rpx;
}
.order-status-name{
    float: right;
    color: #ff6a00;
    line-height: 80rpx;
    vertical-align: middle;
}
.order-goodimg{
    margin: 20rpx 0;
    height: 170rpx;
}
.order-img{
    width: 150rpx;
    height: 150rpx;
    background-repeat: no-repeat;
    background-size: 150rpx;
    float: left;
}
.order-sn{
    margin-top: 10rpx;
}
.order-time{
    color:#7f7f7f;
    font-size: 24rpx;
}
.order-content{
    float: left;
    margin-left: 20rpx;
    font-size:26rpx;
    line-height:38rpx;
}
.goods-name{
    color: #333;
    width: 500rpx;
}
.order-total{
    padding: 20rpx 0;
    text-align:right;
    border-top: 1rpx solid #f3f3f3; 
}
</style>